﻿import React from 'react'
import T from '../lib/T'
import api from '../api'
import mirror, { actions, connect } from 'mirrorx'
import { Checkbox, Button, Pagination } from 'antd'
import IconDom from '../component/IconDom'

const CheckboxGroup = Checkbox.Group

if (!actions.productInfo) {
  mirror.model({
    name: 'productInfo',
    initialState: {
      productDetail: {}
    },
    reducers: {
      setProductInfo (state, data) {
        return Object.assign({}, state, { productDetail: data })
      }
    }
  })
}
class Home extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      currentPage: 1,
      pageSize: 8,
      rowTotal: 0,
      productList: [],
      filterList: [
        { filterName: 'Category', id: 0 },
        { filterName: 'Insurance Company', id: 1 }
      ],
      insuCheckedList: [],
      cateCheckedList: [],
      categoryCodeList: [],
      insurerIdList: [],
      activeItem: 0,
      openFilterBox: false,
      categoryOptions: ['Characteristic', 'Medical', 'Apple'],
      companyOptions: ['123', 'LOL', 'leacent'],
      channelCompanyId: '',
      filterData: {},
      lock: false

    }
    this.changeInsurerList = this.changeInsurerList.bind(this)
    this.changeCateList = this.changeCateList.bind(this)
    this.tabFilter = this.tabFilter.bind(this)
    // 签约商品页面的查询条件
    this.queryAgreementGoodsSearchCondition = this.queryAgreementGoodsSearchCondition.bind(this)
    // 查询签约商品列表
    this.queryAgreementGoodsPage = this.queryAgreementGoodsPage.bind(this)
    this.changePage = this.changePage.bind(this)
  }
  componentDidMount () {
    this.getPartnerId()
  }
  shouldComponentUpdate (nextProps, nextState) {
    let { productList } = this.state
    if (productList.length !== nextState.productList.length) {
      return true
    } else {
      return false
    }
  }
  getPartnerId () {
    T.ajax({
      url: 'api/uc/user/getChannelInfo',
      notip: true,
      noJump: true
    }).then((res) => {
      if (res.code === 0) {
        let { partnerId: channelCompanyId } = res.data
        this.setState({
          channelCompanyId
        }, () => {
          this.queryAgreementGoodsPage()
          this.queryAgreementGoodsSearchCondition()
        })
      }
    })
  }
  queryAgreementGoodsSearchCondition () {
    let { channelCompanyId } = this.state
    channelCompanyId && T.ajax({
      url: api.queryAgreementGoodsSearchCondition.path,
      loading: true,
      data: { channelCompanyId }
    }).then((res) => {
      if (res.success && res.data) {
        let { agreementGoodsCategoryList: categoryList, agreementGoodsInsurerList: insurerList } = res.data
        categoryList = categoryList.map((item) => {
          item.label = item.categoryName
          item.value = 'cate' + item.categoryCode
          return item
        })
        insurerList = insurerList.map((item) => {
          item.label = item.insurerName
          item.value = 'insure' + item.insurerId
          return item
        })
        let filterData = {}
        filterData.categoryList = categoryList
        filterData.insurerList = insurerList
        this.setState({
          filterData
        })
      }
    })
  }
  queryAgreementGoodsPage () {
    let { currentPage, pageSize, channelCompanyId, categoryCodeList, insurerIdList } = this.state
    let condition = {
      channelCompanyId
    }
    // 以下处理是后台不接收空数组。
    insurerIdList.length > 0 && (condition.insurerIdList = insurerIdList)
    categoryCodeList.length > 0 && (condition.categoryCodeList = categoryCodeList)

    if (channelCompanyId) {
      T.ajax({
        url: api.queryAgreementGoodsPage.path,
        loading: true,
        data: {
          condition,
          pageIndex: currentPage,
          pageSize
        }
      }).then((res) => {
        if (res.success && res.data) {
          let { rows: productList, rowTotal } = res.data
          this.setState({
            productList,
            rowTotal
          })
        }
      }, (err) => {
        if (err.code === 10086) {
          this.Call(10086)
        }
      })
    }
  }
  tabFilter (activeItem) {
    this.setState({
      activeItem
    })
  }

  changeInsurerList (insuCheckedList) {
    let insurerIdList = insuCheckedList.map(item => {
      item = item.replace(/insure/g, '')
      return Number(item)
    })
    this.setState({
      insuCheckedList,
      insurerIdList
    }, () => {
      this.queryAgreementGoodsPage()
    })
  }
  changeCateList (cateCheckedList) {
    let categoryCodeList = cateCheckedList.map(item => {
      item = item.replace(/cate/g, '')
      return Number(item)
    })
    this.setState({
      cateCheckedList,
      categoryCodeList
    }, () => {
      this.queryAgreementGoodsPage()
    })
  }
  changePage (currentPage) {
    this.setState({ currentPage }, () => {
      this.queryAgreementGoodsPage()
    })
  }

  render () {
    let { filterList, currentPage, pageSize, activeItem, filterData, productList, rowTotal } = this.state
    let { menuModel } = this.props
    let menuAuth = false
    if (menuModel && menuModel.grantedMenus) {
      console.log('grantedMenus', menuModel.grantedMenus)
      menuAuth = T.getMenuAuth('Insurance Product', menuModel.grantedMenus)
    }
    console.log('pos menuAuth', menuAuth)
    return <div>
      <div className='home'>
        <div className='filter-box'>
          <div className='filter-tab'>
            <span className='filter-title'>Filter:</span>
            {
              filterList.map(item => {
                return <span
                  onClick={() => this.tabFilter(item.id)}
                  className={activeItem === item.id
                    ? 'filter-item active-item'
                    : 'filter-item'}
                  key={item.id}>
                  {item.filterName}
                  <IconDom
                    className='icon-arrow'
                    code='icon-arrow' />
                </span>
              })
            }
          </div>
          <div className='filter-content'>
            {
              activeItem === 0
                ? <CheckboxGroup
                  options={filterData.categoryList}
                  value={this.state.cateCheckedList}
                  onChange={this.changeCateList} />
                : <CheckboxGroup
                  options={filterData.insurerList}
                  value={this.state.insuCheckedList}
                  onChange={this.changeInsurerList} />
            }

          </div>
        </div>
        {productList.length > 0
          ? <div className='list'>
            {productList.map((item, index) => {
              let commissions = (item.commissions * 100).toFixed(0)
              return <div
                key={index}
                className='list-item'>
                <span className='item-title'>
                  {item.productName}
                </span>
                <span className='item-type'>{item.categoryName}</span>
                <div className='introduction'>
                  {item.introduction}
                </div>
                <div className='commissions'>
                commissions: {commissions}%
                </div>
                <div className='mt10'>
                  <span className='item-company'>
                    {item.insurerName}
                  </span>
                  <span className='item-date'>
                    {item.startDate && item.startDate.replace(/-/g, '/')}-{item.endDate && item.endDate.replace(/-/g, '/')}
                  </span>
                </div>
                {
                  item.flag === 1
                    ? <Button
                      type='primary'
                      onClick={() => {
                        actions.productInfo.setProductInfo(item)
                        actions.routing.push({
                          pathname: '/page-product',
                          search: `?agreementGoodsId=${item.id}`
                        })
                      }}
                      disabled={!menuAuth}
                      className='item-flag'>Publish</Button>
                    : item.flag === 2
                      ? <IconDom
                        className='icon-blue-tips item-flag'
                        code='icon-green_tips1' />
                      : item.flag === 3
                        ? <IconDom
                          className='icon-blue-tips item-flag'
                          code='icon-red_tips' />
                        : ''
                }

              </div>
            })}
            <div className='page'>
              <Pagination
                showQuickJumper
                total={rowTotal}
                current={currentPage}
                pageSize={pageSize}
                onChange={this.changePage}
              />
            </div>
          </div>
          : <div className='no-data'>
            <div className='no-data-icon'>
              <IconDom code='icon-zanwuneirong' />
            </div>
              No Data
          </div>
        }
      </div>
    </div>
  }
}

export default connect(state => {
  return state
})(Home)
